<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="department" >
				<el-form-item label="部门">
					<el-input v-model="department.name"  placeholder="部门"></el-input>
				</el-form-item>
				<el-form-item label="编号">
					<el-input v-model="department.sn"  placeholder="编号"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="department.state" placeholder="请选择">
						<el-option label="全部" value=""></el-option>
						<el-option label="启用" value="1"></el-option>
						<el-option label="禁用" value="0"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getDepartments">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>



		<el-table :data="Department" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<!--最前面的选择框-->
			<el-table-column type="selection">
			</el-table-column>
			<!--行号-->
			<el-table-column type="index" label="序号" width="80px" align="center">
			</el-table-column>
			<el-table-column prop="name" label="部门" sortable align="center">
			</el-table-column>
			<el-table-column prop="sn" label="编号" sortable align="center">
			</el-table-column>

			<el-table-column prop="state" label="状态" sortable align="center" :formatter="formState">
			</el-table-column>
			<el-table-column prop="employee.username" label="部门经理" sortable align="center">
			</el-table-column>
			<el-table-column prop="parent.name" label="上级部门" sortable align="center">
			</el-table-column>
			<el-table-column label="操作" width="150" align="center">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		<!--添加和编辑会话框-->
		<el-dialog
				title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">

			<el-form ref="form" :model="form" label-width="80px" :rules="rules" class="demo-ruleForm">
				<el-form-item label="部门名称" prop="name" >
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="部门编号" prop="sn">
					<el-input v-model="form.sn"></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="state">
					<el-radio-group v-model="form.state">
						<!--1  启用  0 禁用-->
						<el-radio :label="1">启用</el-radio>
						<el-radio :label="0">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="部门经理" >
					<el-select v-model="form.managerId" placeholder="请选择">
						<el-option
								v-for="item in optionsEmployee"
								:label="item.username"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="上级部门"  >
					<el-select v-model="form.parentId" placeholder="请选择">
						<el-option
								v-for="item in options"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addDepartment">确 定</el-button>
			  </span>
		</el-dialog>


	</section>
</template>

<script>
	export default {
		data() {
			return {
				Department:[],
				currentPage:1,
				pageSize: 10,
				total: 10,
				//默认false
				listLoading: false,
				sels: [],//列表选中列
				//部门高级查询
				department:{
					name:"",
					sn:"",
					state:""
				},
				//编辑和添加默认隐藏
				dialogVisible:false,
				//添加和编辑表单
				form:{
					name:"",
					sn:"",
					state:1,
					parentId: "",
					managerId:""
				},
				//校验规则
				rules: {
					name: [
						{required: true, message: '请输入部门名称', trigger: 'blur'},
					],
					sn: [
						{required: true, message: '请输入部门编号', trigger: 'blur' },

					]/*,
					manager: [
						{required: true, message: '请选择部门经理', trigger: 'change'},
					]*//*,
					parent: [
						{required: true, message: '请选择上级部门', trigger: 'change'},
					],*/
				},
				//添加和编辑表单动态获取部门的值
				options: [],
				//添加和编辑表单动态获取部门经理的值
				optionsEmployee:[]
			}
		},
		methods: {
			//清空验证信息方法

			//部门添加
			addDepartment(){
				//进行验证
				this.$refs.form.validate((valid) => {
					if (valid) {
						//判断id是否为null
						if(!this.form.id){
							//调用添加方法Ajax
							this.addAjax();
							this.dialogVisible = false;
						}else {
							//调用方法
							this.updateAjax();
							this.dialogVisible = false;
						}
					} else {
						//验证失败提示友好信息
						return this.$message.error("未按要求填写数据！！！");;
					}
				});
			},
			//关闭添加编辑会话框
			handleClose(){
				this.dialogVisible = false;
			},
			//部门添加
			handleAdd(){
				//重置校验信息
				if(this.$refs.form){
					this.$refs.form.resetFields();
				}

				//清空内容
				this.form = {
					name: "",
					sn: "",
					state: 1
				};

				//弹出会话框
				this.dialogVisible = true;
			},
			//高级查询部门函数
			getDepartments(){
				/*调用查询方法*/
				this.loadDepartment();
			},
			//状态显示
			formState(row,column){
				return row.state == 1 ? "启用" : "禁用";
			},
			//编辑
			handleEdit(index,row){
				for(let k in row){
					this.form[k] = row[k];
				}
				//上级部门
				if(row.parent){
					this.form.parentId = row.parent.id;
				}else{
					this.form.parentId = "";
				}
				//部门经理
				if(row.employee){
					this.form.managerId = row.employee.id;
				}else {
					this.form.managerId = "";
				}
				//弹出会话框
				this.dialogVisible = true;
				console.debug(this.form);

			},
			//删除
			handleDel(index,val){
				/*点击删除弹出提示框*/
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//获取id
					let id = val.id;
					this.$http.delete("/department/"+id).then((res => {
						if (res.data.success){
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							//调用方法
							this.loadDepartment();
						}else {
							//删除失败提示友好信息
							this.$message.error(res.data.msg);
						}
					}));

				}).catch(() => {
					//取消删除不给任何提示
				});
			},
			//页面页码改变
			handleCurrentChange(val) {
				//设置currentPage的值
				this.currentPage = val;
				//调用Ajax请求查询分页数据
				this.loadDepartment();
			},
			//勾选框事件改变
			selsChange: function (sels) {
				//给勾选框设置值，显示批量删除的按钮
				this.sels = sels;
			},
			//批量删除
			batchRemove: function () {
				/*点击批量删除弹出提示框*/
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//获取到批量删除的id传递一个数组  /del  匹配批量删除
					let ids = this.sels.map(item => item.id);
					this.$http.patch("/department/del",ids).then((res => {
						if (res.data.success){
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.department={
								name: "",
								sn: ""
							}
							//调用方法
							this.loadDepartment();
						}else {
							//删除失败提示友好信息
							this.$message.error(res.data.msg);
						}
					}));

				}).catch(() => {
					//取消删除不给任何提示
				});


			},
			//发送Ajax请求查询所有分页数据
			loadDepartment(){
				let param = {
					"currentPage": this.currentPage, "pageSize": this.pageSize,
					"name": this.department.name, "sn": this.department.sn,
					"state": this.department.state
				};
				this.$http.patch("/department",param).then((res => {
					console.debug("分页查询",res);
					//给部门列表设置值
					this.Department = res.data.result;
					//设置总条数
					this.total = res.data.total;

				}));
			},
			//添加发送的Ajax
			addAjax(){
				//设置对象，后台获取
				let parent = {
					"id": this.form.parentId
				}
				//设置对象，后台获取
				let manager = {
					"id": this.form.managerId
				}
				//获取到表单中的数据
				let param = {
					"name": this.form.name, "sn": this.form.sn, "state": this.form.state,
					"parent": parent,"employee":manager
				};
				this.$http.put("/department",param).then((res => {
					if (res.data.success){
						this.$message.success("添加成功");
						//刷新
						this.loadDepartment();
					}else {
						//删除失败提示友好信息
						this.$message.error(res.data.msg);
					}
				}));
			},
			//修改发送的Ajax
			updateAjax(){
				//设置对象，后台获取
				let parent = {
					"id": this.form.parentId
				}
				//设置对象，后台获取
				let manager = {
					"id": this.form.managerId
				}
				//获取到表单中的数据
				let param = {"id":this.form.id,"name":this.form.name,"sn":this.form.sn,
					"state":this.form.state,"parent": parent,"employee":manager
				}
				this.$http.post("/department",param).then((res => {
					//console.debug("添加响应数据",res)
					if (res.data.success){
						this.$message.success("修改成功");
						//刷新
						this.loadDepartment();
					}else {
						//删除失败提示友好信息
						this.$message.error(res.data.msg);
					}
				}));
			},
			//查询所有部门
			loadAllDepartmentForm(){
				this.$http.patch("/department/loadAllDepartmentForm").then((res => {
					this.options = res.data;
				}));


			},
			//查询所有部门经理
			loadAllEmployeeForm() {
				this.$http.patch("/department/loadAllEmployeeForm").then((res => {
					//给添加和修改表单经理设置值
					this.optionsEmployee = res.data;
					// //循环遍历将每个id设置成字符串
					// for(let i=0;i<this.optionsEmployee.length;i++){
					// 	//动态取值
					// 	let o = this.optionsEmployee[i];
					// 	//转化为字符串
					// 	o.id = o.id.toString();
					// }
				}));
			}
		},
		//页面加载完成的时候执行
		mounted() {
			//查询分页数据
			this.loadDepartment();
			//查询所有部门
			this.loadAllDepartmentForm();
			//查询所有部门经理
			this.loadAllEmployeeForm();
		}
	}

</script>